<template>
    <div class="check-box">
        <header>
            <div class="left">
                <i v-if="props.showHome" @click="toHome" class="return"></i>
            </div>
            <div class="center">
                <span class="title">{{props.title}}</span>
            </div>
            <div class="right">
                <i class="button" v-if="props.showBtn">{{props.content}}</i>
            </div>
        </header>
        <article>
            <slot/>
        </article>
    </div>
</template>
<script setup>

import {useRouter} from 'vue-router'
import {defineProps} from 'vue'
const router = useRouter()
const props = defineProps({
        showHome:{
            type:Boolean,
            default:true
        },
        showBtn:{
            type:Boolean,
            defalut:true
        },
        title:{
            type:String,
            required:true
        }
    })
function toHome(){
    history.back()
    // router.push('/home')
}
</script>
<style lang="less" scoped>
    .check-box{
        width: 100%;
        header{
            height: 6vh;
            background-color: #c30e17;
            display: flex;
            justify-content: center;
            .left{
                width: 10vw;
                    .return{
                    display: inline-block;
                    // float: left;
                    width: 10vw;
                    height: 2rem;
                    line-height: 2rem;
                    background: url('../images/return.png') center center/ 30px 30px no-repeat ;
                }
            }
            .center{
                width: 80vw;
                    .title{
                        display: block;
                    text-align:center;
                    line-height: 2.1rem;
                    font-size: .9rem;
                    color: #e7cacb;
                }
            }
            .right{
                width: 10vw;
                    .button{
                    display: block;
                    width: 32px;
                    height: 32px;
                    margin: 1vw auto;
                    background: url('../images/saoyisao.png') center center / 32px 32px no-repeat !important;
                }
            }
        }
        article{
            // border-top: 1px solid black;
            height: 94vh;
            position: relative;
            overflow-y: scroll;
        }
    }
</style>